<!--  -->
<template>
  <div class="">
    <search-form @getFilmsList="getFilmsList" />
    <el-card class="mt-40px">
      <template #header>
        <div class="flex justify-between">
          <span>权限列表</span>
          <el-button
            type="primary"
            :disabled="PermissionAuth('create', btnAuth)"
            @click="createFilm"
          >新增</el-button>
        </div>
      </template>
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          v-for="item of columns"
          :key="item?.key"
          :prop="item?.key"
          :label="item?.label"
          :width="item?.width"
          align="center"
        >
          <template
            v-if="item?.key == 'action'"
            #default="scope"
          >
            <el-button
              type="primary"
              size="small"
              :disabled="PermissionAuth('update', btnAuth)"
              @click="updateClick(scope)"
            >修改</el-button>
            <el-button
              type="danger"
              size="small"
              :disabled="PermissionAuth('delete', btnAuth)"
              @click="deleteClick(scope)"
            >删除</el-button>
          </template>
          <template
            v-else-if="item?.key == 'func'"
            #default="scope"
          >
            <el-cascader-panel
              :model-value="formatJson(scope?.row?.func, 2)"
              :props="{ multiple: true }"
              :disabled="true"
              :options="routerToCascader()"
              @change="funcClick"
            />
          </template>
          <template
            v-else-if="item?.key == 'type'"
            #default="scope"
          >
            <div>
              {{
                findKey(roleUserLevelEnum, (o: string) => o == scope?.row?.type) ||
                  scope?.row?.type
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-2 mr-5">
        <el-pagination
          v-model:current-page="current"
          layout="total prev, pager, next"
          :total="count"
          :page-size="5"
          background
          @current-change="updatePage"
        />
      </div>
    </el-card>
    <modal
      :update-form="updateForm"
      @getFilmsList="getFilmsList"
      @setDialogStatus="setDialogStatus"
      @setDialogVisible="setDialogVisible"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, provide, readonly } from "vue";
import {
  ElTable,
  ElTableColumn,
  ElPagination,
  ElCascaderPanel
} from "element-plus";
import { fetchGetRoleList, fetchDeleteUser } from "@/service";
import { SearchForm, Modal } from "./components";
import { roleUserLevelEnum } from "@/enum";
import { findKey } from "lodash-es";
import { routerToCascader } from "./utils";
import { formatJson } from '@/utils';
import { PermissionAuth } from "@/utils";
import { useRoute } from "vue-router";
const dialogVisible = ref(false);
const dialogStatus = ref(false);

const { btnAuth } = useRoute().meta as AuthRoute.MetaProps;
console.log('btnAuth: ', btnAuth);
const updateForm = ref({});
provide("dialogVisible", dialogVisible);
provide("dialogStatus", readonly(dialogStatus));
const columns = [
  {
    key: "id",
    label: "ID"
  },
  {
    key: "type",
    label: "级别"
  },

  {
    key: "func",
    label: "权限",
    width: '500'
  },
  {
    key: "action",
    label: "操作"
  }
];

const tableData = ref<AuthApi.RoleRequest[]>([]);
const count = ref<number>(0);
const current = ref<number>(1);

const getFilmsList = async (searchForm: AuthApi.RoleRequest = {}) => {
  Object.assign(searchForm, { page: current.value, pageSize: 5 });
  const { data } = await fetchGetRoleList(searchForm);
  if (data) {
    tableData.value = data?.list;
    count.value = data?.total;
  }
};

const deleteClick = async (record: any) => {
  const { userId } = record?.row as AuthApi.UserInfoRequest;
  const res = await fetchDeleteUser(userId);
  if (res?.code === 0) {
    window.$message({
      type: "success",
      message: "删除成功"
    });
    getFilmsList();
  }
};

function setDialogStatus(status: boolean) {
  dialogStatus.value = status;
}

function setDialogVisible(status: boolean) {
  dialogVisible.value = status;
}
function updateClick(record: any) {
  const row = record.row;
  updateForm.value = {...row, func: formatJson(row?.func, 2)};
  dialogVisible.value = true;
  dialogStatus.value = false;
}

function createFilm() {
  dialogVisible.value = true;
  dialogStatus.value = true;
}
function updatePage(page: number) {
  current.value = page;
  getFilmsList();
}

function funcClick(){
  window.$message({
    type:'warning',
    message: '此操作无效，请在修改按钮处更改此权限'
  });
}
getFilmsList();
</script>

<style lang="scss" scoped></style>
